<template>
  <template>
    <view class="page">
      <view class="nlist">
        <view class="nitem" v-for="item in content" :key="item.id">
          <!-- <view class="oneitem">
            <image class="tous" src="/static/icon/icon_hy_yh.png" mode=""/>
            <text class="onename">{{info.user_no}}</text>
            <view class="zixing">自行注册账号</view>
          </view> -->
          <view class="twoitem">
            <view class="hengone heng">
              <view class="hitem">
                <text class="hleft">功能:</text>
                <text class="hright txt">{{ item.compent }}</text>
              </view>
            </view>
            <view class="hengone heng">
              <view class="hitem">
                <text class="hleft">开始时间:</text>
                <text class="hright txt">{{ item.startTime || '暂无' }}</text>
              </view>
            </view>
            <view class="hengone heng" v-if="item.endTime">
              <view class="hitem">
                <text class="hleft">结束时间:</text>
                <text class="hright txt">{{ item.endTime || '暂无' }}</text>
              </view>
            </view>
            <view class="hengone heng">
              <view class="hitem">
                <view class="hleft">
                  模式:
                </view>
                <view class="hright txt">
                  {{ item.mode }}
                </view>
              </view>
            </view>
            <view class="hengone heng" v-if="item.mode==='自动模式'">
              <view class="hitem">
                <view class="hleft">
                  单点多点:
                </view>
                <view class="hright txt">
                  {{ item.point }}
                </view>
              </view>
            </view>
            <view class="hengone heng">
              <view class="hitem">
                <text class="hleft">暂停次数:</text>
                <text class="hright txt">{{ (item.pauseTimes ? item.pauseTimes : 0) }}</text>
              </view>
            </view>
			<view class="hengone heng">
			  <view class="hitem">
			    <text class="hleft">理疗次数:</text>
			    <text class="hright txt">{{ (item.orderno? item.orderno: '无理疗次数参数') }}</text>
			  </view>
			</view>

            <view class="hengone heng">
              <view class="hitem">
                <text class="hleft">是否异常:</text>
                <text class="hright txt">{{ (item.isError ? '是' : '否') }}</text>
              </view>
            </view>
            <view class="hengone heng">
              <view class="hitem">
                <text class="hleft">会员昵称:</text>
                <text class="hright txt">{{ item.vipCode || '--' }}</text>
              </view>
            </view>

          </view>
        </view>
      </view>

      <!-- <view v-for="item in content" :key="item.id" class="equip">
        <view class="flex items-center">
          <view class="equip_lable">
            功能:
          </view>
          <view class="equip_value" style="color: blue;font-size: 14px;">
            {{ item.compent }}
          </view>
        </view>
        <view class="flex items-center">
          <view class="equip_lable">
            开始时间:
          </view>
          <view class="equip_value">
            {{ item.startTime }}
          </view>
        </view>
        <view class="flex items-center">
          <view class="equip_lable">
            结束时间:
          </view>
          <view class="equip_value">
            {{ item.endTime }}
          </view>
        </view>
        <view class="flex items-center">
          <view class="equip_lable">
            模式:
          </view>
          <view class="equip_value">
            {{ item.mode }}
          </view>
        </view>
        <view class="flex items-center">
          <view class="equip_lable">
            单点多点:
          </view>
          <view class="equip_value">
            {{ (item.point === "singlePoint" ? "单点模式" : "多点模式") }}
          </view>
        </view>
        <view class="flex items-center">
          <view class="equip_lable">
            暂停次数:
          </view>
          <view class="equip_value">
            {{ (item.pauseTimes ? item.pauseTimes : 0) }}
          </view>
        </view>

        <view class="flex items-center">
          <view class="equip_lable">
            是否异常:
          </view>
          <view class="equip_value">
            {{ (item.isError ? '是' : '否') }}
          </view>
        </view>

        <view class="flex items-center">
          <view class="equip_lable">
            会员昵称:
          </view>
          <view class="equip_value">
            {{ item.vipCode }}
          </view>
        </view>
      </view> -->

      <wd-pagination v-if="content.length > 0" v-model="pagination.page" :total="pagination.total"
                     @change="handleChange"/>

      <wd-message-box/>
      <view class="empty" v-if="content.length == 0">
        <wd-status-tip image="content" tip="暂无设备运行记录"/>
      </view>
    </view>
  </template>
</template>

<script setup>
import {
  ref,
  reactive
} from 'vue';
import {
  onLoad,
  onPullDownRefresh
} from '@dcloudio/uni-app'

import {getMdDeviceLogList} from "@/api/form.js"

const id = ref("")
const content = ref([])
const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})


onLoad((e) => {
  if (e.id) {
    id.value = e.id
    uni.setNavigationBarTitle({
      title: ` 设备-${e.id}运行记录`
    })
    init()
  }
})

const init = () => {
  content.value = []
  getMdDeviceLogList({
    hasQuery: true,
    pageNo: pagination.page,
    pageSize: pagination.pageSize,
    code: id.value,
  }).then(res => {
    uni.stopPullDownRefresh()
    pagination.total = res.total
    content.value = res.records || []
  })
}


const handleChange = (e) => {
  pagination.page = e.value

  init()
}
</script>

<style lang="scss">
.empty {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.equip {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 4px 0px #efefef;
  padding: 40rpx;
  color: #666;
  font-size: 13px;

  &_name {
    color: #333;
    font-size: 14px;
    margin-bottom: 20rpx;
  }

  &_lable {
    margin-right: 20rpx;
  }
}

// 新列表样式开始
.nlist {
  .nitem {
    margin: 20rpx;
    background-color: #fff;
    // padding: 30rpx 0 30rpx 30rpx;
    display: flex;
    flex-direction: column;
    border-radius: 20rpx;

    .oneitem {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 20rpx 0rpx 0rpx 20rpx;
      position: relative;

      .tous {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
      }

      .onename {
        font-weight: bold;
        font-size: 32rpx;
        color: #1A1A1A;
        display: inline-block;
        margin-left: 10rpx;
      }

      .zixing {
        margin-left: auto;
        background: #EDF2FF;
        border-radius: 5rpx 0rpx 0rpx 5rpx;
        padding: 4rpx 20rpx;
        font-weight: 400;
        font-size: 20rpx;
        color: #6194FF;
      }
    }

    .twoitem {
      display: flex;
      flex-direction: column;
      padding: 30rpx;
      // background-color: rgba(244, 246, 249, 0.8);
      // border-radius: 20rpx;
      // margin: 30rpx;
      .hengone {
        display: flex;
        flex-direction: column;
        margin-bottom: 20rpx;
      }

      .hengone:last-child {
        margin-bottom: 0;
      }

      .heng {
        display: flex;
        flex-direction: row;
        align-items: center;

        .hitem {
          display: flex;
          flex-direction: row;
          align-items: center;
          flex: 1;

          .hleft {
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            width: 150rpx;
            display: inline-block;
          }

          .hright {
            font-weight: 500;
            font-size: 28rpx;
            color: #1A1A1A;
            max-width: 73%;
            display: inline-block;
          }
        }

        .ban {
          width: 50%;
        }

        .ban:nth-child(even) {
          margin-left: auto;
        }
      }
    }
  }
}

// 新列表样式结束
</style>
